<template>
  <div>
    <CustomContent>
      <template v-slot:body>
        <div class="app-car-container">
          <MmvTitle title="费用补录"></MmvTitle>
          <el-row>
            <el-table :data="chargeItemsVo" border>
              <el-table-column label="费用名称" align="center" >
                <template slot="header">
                  费用名称<span style="color: red">*</span>
                </template>
                <template slot-scope="{ row }">
                  <el-input v-model="row.costName"></el-input>
                </template>
              </el-table-column>

              <el-table-column label="费用金额" align="center">
                <template slot="header">
                  费用金额<span style="color: red">*</span>
                </template>
                <template slot-scope="{ row }">
                  <el-input v-model="row.paidAmount" @keyup.native="row.paidAmount= oninput(row.paidAmount, 2)">
                    <el-button slot="append">元</el-button>
                  </el-input>
                </template>
              </el-table-column>

              <el-table-column label="支付方式" align="center">
                <template slot="header">
                  支付方式<span style="color: red">*</span>
                </template>
                <template slot-scope="{ row }">
                  <el-select v-model="row.payWay" style="width: 100px">
                    <el-option
                      v-for="dict in dict.type.sys_pay_way"
                      v-if="dict.value<5"
                      :key="parseInt(dict.value)"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    />
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column label="费用类型" align="center">
                <template slot="header">
                  费用类型<span style="color: red">*</span>
                </template>
                <template slot-scope="{ row }">
                  <el-select v-model="row.billType">
                    <el-option label="收入" :value="1"></el-option>
                    <el-option label="支出" :value="2"></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column label="支付时间"  align="center" min-width="120">
                <template slot="header">
                  支付时间<span style="color: red">*</span>
                </template>
                <template slot-scope="{ row }">
                  <el-date-picker  v-model="row.paidTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                  value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                                  style="width:180px;"></el-date-picker>
                </template>
              </el-table-column>


              <el-table-column  align="center" min-width="80">
                <template slot="header" slot-scope="scope">
                  经办人<span style="color: red">*</span>
                </template>
                <template slot-scope="{ row }">
                  <el-input v-model="row.operator"></el-input>
                </template>
              </el-table-column>

              <el-table-column label="备注" align="center" min-width="150">
                <template slot-scope="{ row }">
                  <el-input v-model="row.remark"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="支付凭证" align="center" min-width="100">
                <template slot-scope="{ row }">
                  <ImageUpload v-model="row.url" :limit="1" :isShowTip="false"  :zoom="0.5"/>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="$index">
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteChargingItems($index)"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-col :span="24" style="text-align: center;margin: 20px 0">
              <el-button icon="el-icon-plus" @click="addChargingItems">添加费用项</el-button>
            </el-col>
          </el-row>
        </div>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="primary" @click.native="saveForm" :loading="commitLoading">保存</el-button>
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>
    </CustomContent>
  </div>
</template>

<script>
import * as api from "@/api/order";
import MmvTitle from "@/components/MmvUI/MmvTitle";
import CustomContent from "@/components/custom/content.vue";
import moment from "moment"
import {supplementaryExpenses} from "@/api/order";
export default {
  name: "OtaCostAdditional",
  dicts: ['sys_pay_way'],
  components: {
    CustomContent,
    MmvTitle
  },
  data() {
    return {
      commitLoading:false,
      orderNo:'',
      chargeItemsVo: [{
        costName: '',
        paidAmount: '',
        payWay:1,
        billType: 1,
        paidTime:'',
        operator:this.$store.getters.name,
        remark:'',
        url:'',
        bizNo:'',
      }],

    }
  },
  computed: {

  },
  mounted() {
   this.orderNo = this.$route.query.orderNo;
   this.chargeItemsVo[0].bizNo = this.orderNo;
    console.log('刷新了页面')
  },
  methods: {
    addChargingItems() {
      this.chargeItemsVo.push({
        costName: '',
        paidAmount: '',
        payWay:1,
        billType: 1,
        paidTime:'',
        operator:this.$store.getters.name,
        remark:'',
        url:'',
        bizNo:this.orderNo,
      })
    },
    deleteChargingItems(index) {
      this.chargeItemsVo.splice(index, 1)
    },
    saveForm(){

      if (this.chargeItemsVo.length>0) {
        let isError = false
        this.chargeItemsVo.forEach((item)=>{
          if(this.isNull(item.costName) || this.isNull(item.paidAmount) || this.isNull(item.paidTime) || this.isNull(item.operator)){
            this.$message.error('请完善费用项,必填项不能为空')
            isError = true
           return
          }
        })

        if (!isError) {
          this.commitLoading = true
          supplementaryExpenses(this.chargeItemsVo).then(res=>{
            this.$message.success('保存成功')
            this.$router.back()
          }).finally(()=>{
            this.commitLoading = false
          })
        }

      }else  {
        this.$message.warning('请至少添加一条补录的费用项')
        return
      }


    },
    close(){
      this.$router.back()
    }
  }
}
</script>

<style scoped>

</style>
